import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Button, Popover, Badge, message} from 'antd';
import config from 'config'
import menuRoute from 'routes/menuRoute.js'
import SearchArea from 'components/search-area.js';
import budgetJournalService from 'containers/budget/budget-journal/budget-journal.service'
import "styles/budget/budget-journal/budget-journal.scss"
import ResizeTable from 'components/resize-table'

class BudgetJournal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: [],
      searchParams:{
        journalTypeId:'',
        journalCode:'',
        periodStrategy:'',
        status:''
      },
      organization:{},
      pagination: {
        total:0,
      },
      page:0,
      pageSize:10,
      showUpdateSlideFrame:false,
      showCreateSlideFrame:false,
      searchForm: [
        {type: 'select', id:'journalTypeId', label:messages('budget.key105'/*预算日记账类型*/), options: [], method: 'get',
          getUrl: `${config.budgetUrl}/api/budget/journals/journalType/selectByInput`, getParams: {organizationId: props.organization.id},
          labelKey: 'journalTypeName', valueKey: 'id'},
        {type: 'input', id: 'journalCode', label: messages('budget.key102'/*预算日记账编号*/), /*预算日记账编号*/
        },
        {type:'value_list',label: messages('budget.key109'/*编制期段*/) ,id:'periodStrategy', options: [], valueListCode: 2002},
        {type:'value_list',label: messages('budget.key101'/*状态*/) ,id:'status', options: [], valueListCode: 2028},
      ],

      columns: [
        {          /*预算日记账编号*/
          title: messages('budget.key102'/*预算日记账编号*/), key: "journalCode", dataIndex: 'journalCode',width: '18%',
          render: recode => (
            <Popover content={recode}>
              {recode}
            </Popover>)
        },
        {          /*预算日记账类型*/
          title: messages('budget.key105'/*预算日记账类型*/), key: "journalTypeName", dataIndex: 'journalTypeName',width:'16%',
          render: recode => (
            <Popover content={recode}>
              {recode}
            </Popover>)
        },
        {          /*编制期段*/
          title: messages('budget.key109'/*编制期段*/), key: "periodStrategyName", dataIndex: 'periodStrategyName',width:'8%'
        },
        {          /*预算表*/
          title:messages('budget.key106'/*预算表*/), key: "structureName", dataIndex: 'structureName',
          render: recode => (
            <Popover content={recode}>
              {recode}
            </Popover>)
        },
        {
          /*预算场景*/
          title: messages('budget.key107'/*场景*/), key: "scenario", dataIndex: 'scenario',
          render: recode => (
            <Popover content={recode}>
              {recode}
            </Popover>)
        },
        {
          /*预算版本*/
          title: messages('budget.key108'/*版本*/), key: "versionName", dataIndex: 'versionName',
          render: recode => (
            <Popover content={recode}>
              {recode}
            </Popover>)
        },
        {
          /*创建时间*/
          title: messages('budget.key104'/*创建时间*/), key: "createdDate", dataIndex: 'createdDate',
          render: recode => (
            <Popover content={String(recode).substring(0,10)}>
              {String(recode).substring(0,10)}
            </Popover>)
        },
        {
          /*备注*/
          title: messages('common.remark')/*备注*/, key: "description", dataIndex: 'description',
          render: description => (
            <Popover content={description}>
              {description}
            </Popover>)
        },
        {          /*状态*/
          title: messages('budget.key101'/*状态*/), key: "status", dataIndex: 'status',
          render(recode,text){
            switch (recode){
              case 'NEW':{ return <Badge status="processing" text={text.statusName} />}
              case 'SUBMIT':{ return   <Badge status="default"  text={text.statusName} />}
              case 'SUBMIT_RETURN':{return <Badge status="default"  text={text.statusName}/> }
              case 'REJECT':{ return  <Badge status="error" text={text.statusName} />}
              case 'CHECKED':{return <Badge status="warning" text={text.statusName}/>}
              case 'CHECKING':{return <Badge  status="warning" text={text.statusName}/>}
              case 'POSTED':{return <Badge status="success" text={text.statusName}/>}
              case 'BACKLASH_SUBMIT':{return <Badge status="default"  text={text.statusName}/>}
              case 'BACKLASH_CHECKED':{return <Badge status="default"  text={text.statusName}/>}
            }
          }
        },
      ],
      newBudgetJournalDetailPage: menuRoute.getRouteItem('new-budget-journal','key'),    //新建预算日记账的页面项
      budgetJournalDetailPage: menuRoute.getRouteItem('budget-journal-detail','key'),    //预算日记账详情
      budgetJournalDetailSubmit: menuRoute.getRouteItem('budget-journal-detail-submit','key'),
      selectedEntityOIDs: []    //已选择的列表项的OIDs
    };
  }

  componentWillMount(){
    this.getList();
  }

  //获取预算日记账数据
  getList(){
    this.setState({loading:true,});
    let params = Object.assign({}, this.state.searchParams);
    params.organizationId = this.props.organization.id;
    params.page = this.state.page;
    params.size = this.state.pageSize;
    budgetJournalService.getBudgetJournalHeader(params).then((response)=>{
      this.setState({
        data: response.data,
        loading: false,
        pagination: {
          total: Number(response.headers['x-total-count']) ? Number(response.headers['x-total-count']) : 0,
          onChange: this.onChangePager,
          current: this.state.page + 1
        }
      })
    }).catch((e)=>{
      message.error(e.response.data.message);
    })
  }

  //分页点击
  onChangePager = (page) => {
    if(page - 1 !== this.state.page)
      this.setState({
        page: page - 1,
        loading: true
      }, ()=>{
        this.getList();
      })
  };

  //点击搜搜索
  handleSearch = (values) =>{
    this.setState({
      searchParams:values,
    },()=>{
      this.getList()
    })
  };

  //新建
  handleCreate = () =>{
    let path = this.state.newBudgetJournalDetailPage.url;
    this.context.router.push(path)
  };

  //跳转到详情
  HandleRowClick=(value)=>{
    const journalCode =value.id;
    if(value.status==="NEW" || value.status==="SUBMIT_RETURN" || value.status==="REJECT"){
      let path=this.state.budgetJournalDetailPage.url.replace(":journalCode",journalCode);
      this.context.router.push(path);
    }else {
      let path=this.state.budgetJournalDetailSubmit.url.replace(":journalCode",journalCode);
      this.context.router.push(path);
    }
  };

  render(){
    const { loading, searchForm ,data, pagination, columns } = this.state;
    return (
      <div className="budget-journal">
        <SearchArea searchForm={searchForm} submitHandle={this.handleSearch}/>
        <div className="table-header">
          <div className="table-header-title">{messages('common.total',{total:`${pagination.total}`})}</div>  {/*共搜索到*条数据*/}
          {/* <div className="table-header-buttons">
            <Button type="primary" onClick={this.handleCreate}>{messages('common.create')}</Button>
          </div> */}
        </div>
        <ResizeTable
          loading={loading}
          dataSource={data}
          columns={columns}
          pagination={pagination}
          size="middle"
          bordered
          rowKey={record=>record.id}
          onRow={record => ({
            onClick: () => this.HandleRowClick(record)
          })}
        />
      </div>
    )
  }

}

BudgetJournal.contextTypes ={
  router: React.PropTypes.object
}

function mapStateToProps(state) {
  return {
    user: state.login.user,
    company: state.login.company,
    organization: state.login.organization
  }
}

export default connect(mapStateToProps)(BudgetJournal);
